<template>
  <div class="list-page">
    <tool-bar nav="" :title="($route.query.title || '-') + ' App请求日志'">
    </tool-bar>

    <my-list
        ref="list"
        :url="'/system/file-log/list/' + db"
        @param="preload"
        @loaded="procData"
        :page-size="$data.pageSize"
        :query="$data.query"
    >
      <el-table-column label="appName" prop="appName" width="180"></el-table-column>
      <el-table-column label="用户Id" prop="userId" width="120"></el-table-column>
<!--      <el-table-column align="center" label="用户名" prop="userName" width="180"></el-table-column>-->
      <el-table-column align="center" label="请求Id" width="120">
        <template v-slot="scope">
          <div class="link" @click="view_log(scope.row.requestId)">{{ scope.row.requestId }}</div>
        </template>
      </el-table-column>
      <el-table-column label="请求地址">
        <template #header>
          <el-button v-if="$data.showPath" size="small" type="info" @click="show_change(false)">请求地址</el-button>
          <el-button v-else size="small" type="warning" @click="show_change(true)">接口含义</el-button>
        </template>

        <template v-slot="scope">

          <div>{{
            showPath(scope.row)
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态码" prop="status" width="80"></el-table-column>
      <el-table-column align="center" label="时长" prop="totalMilliSeconds" width="80"></el-table-column>
<!--      <el-table-column align="center" label="日志级别" width="90">-->
<!--        <template v-slot="scope">-->
<!--          <el-tag type="danger" effect="dark" v-if="scope.row.logLevel == 'ERROR'">{{ scope.row.logLevel }}</el-tag>-->
<!--          <div v-else>{{ scope.row.logLevel }}</div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column align="center" label="时间" prop="recvAt" width="180"></el-table-column>
      <template #query="scope">
        <kv label="appName">
          <el-input v-model="scope.query.appName"></el-input>
        </kv>
        <kv label="用户Id">
          <el-input v-model="scope.query.userId"></el-input>
        </kv>
        <kv label="接口">
          <el-input v-model="scope.query.path"></el-input>
        </kv>
        <kv label="请求Id">
          <el-input v-model="scope.query.requestId"></el-input>
        </kv>
        <kv label="消息">
          <el-input v-model="scope.query.msg"></el-input>
        </kv>

        <kv label="总时长">
          <div style="display: flex;align-items: center;">
            <el-input v-model="scope.query.timeFrom" style="width:80px"></el-input>
            -
            <el-input v-model="scope.query.timeTo" style="width:80px"></el-input>
          </div>
        </kv>

        <kv label="时间">
          <div style="display: flex;align-items: center;">
            <el-input v-model="scope.query.startAt"></el-input>
            -
            <el-input v-model="scope.query.endAt"></el-input>
          </div>
        </kv>
      </template>

      <template #pager>
        <div style="flex:1">
        </div>
        <selector :data="[10,20,50,100,200,500]" v-model="$data.pageSize"></selector>
      </template>
    </my-list>

    <el-dialog v-model="$data.dlgShow" :title="'追溯日志-' + $data.requestId" :destroy-on-close="true" width="75vw">
      <file-log :db="db" :request-id="$data.requestId"></file-log>
    </el-dialog>
  </div>
</template>

<script setup>
/**
 * Created by CodeGenerator at 2025-08-31 02:38:43
 */
import fileLog from "./file-log.vue"

//定义 vue2的this,当前组件
let $self = getCurrentInstance();

//定义 $attrs
let $attrs = useAttrs()


//定义事件
let $emit = defineEmits(["update:modelValue", "loaded"]);

//定义属性
// var $props = defineProps({
//   db: {type: String, default: ""},
// });

const db = jv.$route.query.db || "-";


//定义data
let $data = reactive({
  //默认查询条件,默认存储
  pageSize: 15,
  query: {},
  dlgShow: false,
  requestId: "",
  showPath: true
})

const show_change= v =>{
  $data.showPath = v;
}


const showPath =row =>{
  var path = row.path
      .replace("https://huatuocloud.com", "")
      .replace("https://test.huatuocloud.com", "")
      .replace("http://app-api", "")

  if( $data.showPath) {
    return path
  }
  else{
    return jv.pathDict[path] || path;
  }
}
/**
 * 添加查询参数，修改分页参数等。
 * @param param
 */
const preload = (param, config) => {
  //param.type = this.$route.params.type
  config.headers = {"schema": "columns=appName,userId,requestId,logLevel,path,recvAt,totalMilliSeconds"};
}

/**
 * 处理列表的数据
 * @param res
 */
const procData = (res) => {
  res.data.data.forEach(it => {
    //如果是组合实体，设置 it.id=...
  });
}

const list = ref();

const view_log = (requestId) => {
  $data.requestId = requestId;

  $data.dlgShow = true;
  // jv.$router.push(`/es/file-log/${$props.db}/${requestId}`);
}



</script>

<style scoped lang="scss">
</style>
